<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>功能管理</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../lib/zTree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../static/css/skins.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.min.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/zTree/js/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="../../static/js/MD5/Base64.js"></script>
    <script type="text/javascript" src="../../static/js/MD5/md5.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <script type="text/javascript" src="../../static/js/tool.js"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }

        .el-main {
            padding: 4px;
        }

        .el-cascader-menu__wrap {
            min-height: 300px
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body class="skin-blue">
<el-container id="app">
    <el-aside width="20%" style="background-color: white;">
        <div>
            <ul id="ztree" class="ztree"></ul>
        </div>
    </el-aside>
    <el-main>
        <vxe-grid border ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source
                  @page-change="handlePageChange" :height="tableHeight" size="mini" :data="gridData"
                  :loading="tableLoading"
                  :checkbox-config="tableRadio" :pager-config="tablePage" :toolbar="tableToolbar"
                  :export-config="tableExport"
                  :header-cell-style="{'text-align':'center'}" @cell-dblclick="cellDBLClickEvent"
                  :edit-config="{trigger:'click', mode:'row'}" @toolbar-button-click="toolbarButtonClickEvent">
            <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
            <vxe-table-column type="seq" title="序号" width="60" align="right">
            </vxe-table-column>
            <vxe-table-column field="buttonId" title="按钮ID" width="120" align="right">
            </vxe-table-column>
            <vxe-table-column field="buttonName" title="按钮名称" align="left">
            </vxe-table-column>
            <vxe-table-column field="btName" title="按钮类型" width="130" align="left">
            </vxe-table-column>
            <vxe-table-column field="orderId" title="排序" width="130" align="right">
            </vxe-table-column>
            <vxe-table-column field="createUser" title="创建人" width="130" align="left">
            </vxe-table-column> 
            <vxe-table-column field="createTime" title="创建日期" width="150" align="right" :formatter="formatDate">
            </vxe-table-column>
            <vxe-table-column field="buttonId" title="自增ID" align="left" :visible="visible">
            </vxe-table-column>
        </vxe-grid>

        <vxe-modal ref="xModal" v-model="showEdit" :title="selectRow ? '编辑&保存' :'新增&保存'" width="800"
                   :loading="submitLoading" resize destroy-on-close>
            <el-form :model="formData" :rules="formRules" ref="formData" label-width="80px" label-position="right"
                     size="mini">
                <el-row>
                    <el-col>
                        <el-form-item label="按钮名称" prop="buttonName">
                            <el-input type="text" v-model="formData.buttonName" placeholder="请输入按钮名称！" maxlength="32"
                                      :disabled="selectRow!=null"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="按钮类型" prop="btId">
                            <el-select v-model="formData.btId" clearable placeholder="请选择按钮类型" style="width:100%">
                                <el-option v-for="item in btTypeOptions" :key="item.value" :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="排序号" prop="orderId">
                            <el-input-number v-model="formData.orderId" step="1" placeholder="请输入排序号"
                                             style="width:100%">
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item style="text-align: right;">
                            <el-button type="primary" icon="el-icon-folder" @click="submitEvent('formData')"
                                       :disabled="disabled"
                                       v-cloak>保存
                            </el-button>
                            <el-button type="warning" icon="el-icon-refresh-right" @click="resetEvent('formData')"
                                       v-cloak>重置
                            </el-button>
                            <el-button type="warning" icon="el-icon-switch-button" @click="closeEvent('formData')"
                                       v-cloak>退出
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </vxe-modal>
    </el-main>
</el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        let main = {
            data() {
                return {
                    isEdit: false,
                    loading: false,
                    disabled: false,
                    visible: false,
                    btTypeOptions: [],
                    tableHeight: '100%',
                    tablePage: {
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 30,
                        align: 'left',
                        pageSizes: [30, 50, 100, 200],
                        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
                            'Total'
                        ],
                    },
                    selected: [],
                    tableLoading: false,
                    gridData: [],
                    tableToolbar: {
                        id: 'toolbar',
                        size: 'mini',
                        perfect: true,
                        buttons: [{
                            code: 'btnInsert',
                            name: '新增',
                            status: 'perfect',
                            icon: 'fa fa-plus vxe-primary-color'
                        },
                            {
                                code: 'btnExport',
                                name: '导出',
                                status: 'perfect',
                                icon: 'fa fa-file-excel-o vxe-info-color'
                            }
                        ]
                    },
                    tableExport: {
                        filename: 'export',
                        sheetName: 'Sheet1',
                        type: 'xlsx',
                        // 自定义类型
                        types: ['xlsx', 'csv', 'html', 'xml', 'txt']
                    },
                    tableRadio: {
                        trigger: 'row',
                        highlight: true
                    },
                    submitLoading: false,
                    selectRow: null,
                    showEdit: false,
                    queryData: {
                        menuId: ""
                    },
                    formData: {
                        buttonId: "",
                        buttonName: "",
                        btId: "",
                        orderId: "",
                        menuId: ""
                    },
                    formRules: {
                        buttonName: [{
                            required: true,
                            message: '请输入名称'
                        },{
                           min: 1,
						   max: 200,
                           message: '长度在1到200个字符',
						}],
                    },
                    setting: {
                        async: {
                            enable: true,
                            url: `${curl}/menu/getMenuZtreeBtn`,
                            type: 'post',
                            autoParam: ["menuId"],
                            otherParam: {
                                userCode: 'admin'
                            }
                        },
                        check: {
                            enable: true,
                            chkStyle: 'radio',
                            radioType: "all"
                        },
                        data: {
                            key: {
                                name: "menuName"
                            },
                            simpleData: {
                                enable: true,
                                idKey: "menuId",
                                pIdKey: "parentMenuId",
                                rootPId: '0'
                            }
                        },
                        view: {
                            showLine: true,
                            dblClickExpand: false,
                            //fontCss: $.fn.getFontCss
                        },
                        callback: {
                            onAsyncSuccess: this.zTreeOnAsyncSuccess,
                            onClick: this.zTreeOnClick
                        }
                    }
                }
            },
            created() {
                this.findList();
                this.getBtn();
            },
            mounted() {
                this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
                $.fn.zTree.init($("#ztree"), this.setting);
            },
            methods: {
                getBtn() {
                    this.tableToolbar.buttons = Tool.getButton()
                },
                handlePageChange({
                                     currentPage,
                                     pageSize
                                 }) {
                    this.tablePage.currentPage = currentPage
                    this.tablePage.pageSize = pageSize
                    this.findList()
                },
                //获取列表信息
                findList() {
                    this.tableLoading = true;
                    let params = Object.assign({
                        page: this.tablePage.currentPage,
                        rows: this.tablePage.pageSize,
                        menuId: this.queryData.menuId
                    })
                    let that = this;
                    webApi('/button/getButtonList', 'post', params, function (data) {
                        that.gridData = data.data.rows;
                        that.tablePage.total = data.data.total;
                        that.tableLoading = false;
                        that.getbtTypeOptions();
                    }, function () {
                        that.tableLoading = false;
                    })
                },
                getbtTypeOptions() {
                    let that = this;
                    webApi('/button/getbtTypeOptions', 'post', {}, function (data) {
                        that.btTypeOptions = data.data;
						console.log(data)
                    }, function (xhr, type, errorThrown) {
                    })
                },
                zTreeOnAsyncSuccess() {
                    let treeObj = $.fn.zTree.getZTreeObj("ztree");
					console.log(treeObj)
                    treeObj.expandAll(false);
                },
                zTreeOnClick(event, treeId, treeNode) {
                    let treeObj = $.fn.zTree.getZTreeObj("ztree");
                    treeObj.checkNode(treeNode, true, true, true);
                    this.queryData.menuId = treeNode.menuId;
                    this.formData.menuId = treeNode.menuId;
                    this.selected = treeObj.getCheckedNodes(true)
                    this.searchBtn();
                },
                searchBtn() {
                    this.tablePage.currentPage = 1
                    this.findList()
                },
                searchEvent(formName, acType) {
                    let treeObj = $.fn.zTree.getZTreeObj("ztree");
                    let nodes = treeObj.getCheckedNodes(true);
                    if (acType == 0) {
                        this.tablePage.currentPage = 1
                        this.queryData = {
                            menuId: nodes.length >= 1 ? nodes[0].menuId : ''
                        }
                    } else {
                        this.queryData.menuId = nodes.length >= 1 ? nodes[0].menuId : '';
                    }
                    this.findList()
                },
                formatDate({
                               cellValue
                           }) {
                            return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
                },
                toolbarButtonClickEvent({
                                            code
                                        }, event) {
                    switch (code) {
                        case 'btnInsert':
                            this.insertEvent();
                            break;
                        case 'btnUpdate':
                            if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
                                let row = this.$refs.xGrid.getCheckboxRecords()
                                this.editEvent(row[0]);
                            } else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
                                this.$message({
                                    message: "数据大于一条，无法修改",
                                    type: 'warning',
                                    center: true
                                });
                            } else {
                                this.$message({
                                    message: "请选择一行数据",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                        case 'btnDelete':
                            var row = this.$refs.xGrid.getCheckboxRecords();
                            if (row.length > 0) {
                                this.removeEvent(row);
                            } else {
                                this.$message({
                                    message: "请选择需要删除的数据行",
                                    type: 'warning',
                                    center: true
                                });
                            }
                            break;
                        case 'btnExport':
                            this.$refs.xGrid.exportData({
                                filename: '菜单列表',
                                sheetName: 'Sheet1',
                                type: 'xlsx'
                            });
                            break;
                    }
                },
                formatterBtnType(cellValue) {
                    let i = this.btTypeOptions.findIndex((item) => item.value == cellValue)
                    return this.btTypeOptions[i].label ? this.btTypeOptions[i].label : '';
                },
                idTolabel(name) {
                    let i = this.btTypeOptions.findIndex((item) => item.label == name);
                    console.log(i);
                    return this.btTypeOptions[i].value ? this.btTypeOptions[i].value : ''
                },
                insertEvent() {
                    this.isEdit = false
					console.log(this.selected)
					let treeObj = $.fn.zTree.getZTreeObj("ztree");
                    let nodes = treeObj.getCheckedNodes(true);
					console.log(nodes)
					if(nodes.length>0){
						if ( nodes[0].check_Child_State == 0 || nodes[0].parentMenuId == 0) {
						    this.$message({
						        message: '请选择子菜单',
						        type: 'warning',
						        center: true
						    });
						} else if (nodes[0].check_Child_State == -1) {
						    this.formData = {
						        buttonId: "",
						        buttonName: "",
						        btId: "",
						        orderId: "",
						        menuId: nodes[0].menuId
						    };
						    this.selectRow = null;
						    this.showEdit = true;
						} else {
						    this.$message({
						        message: '请选择菜单',
						        type: 'warning',
						        center: true
						    });
						}
					}else{
						this.$message({
						    message: '请选择左侧菜单',
						    type: 'warning',
						    center: true
						});
					}
                  
                },
                submitEvent(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submitLoading = true;
                            this.disabled = true;
                            let params = Object.assign(this.formData);
                            let that = this
                            if (this.isEdit) {
                                this.formData.btId = typeof this.formData.btId == 'string'
								&& /.*[\u4e00-\u9fa5]+.*$/.test(this.formData.btId) ? this.idTolabel(this.formData
                                    .btId) : this.formData.btId
                                webApi('/button/save', 'post', params, function (data) {
                                    if (data.code == 200) {
                                        that.findList()
                                        that.$message({
                                            message: data.msg,
                                            type: 'success',
                                            center: true
                                        });
                                        that.showEdit = false;
                                    } else {
                                        that.$message({
                                            message: data.msg,
                                            type: 'error',
                                            center: true
                                        });
                                    }
                                    that.disabled = false;
                                }, function (xhr, type, errorThrown) {
                                })
                            } else {
                                webApi('/button/save', 'post', params, function (data) {
                                    if (data.code == 200) {
                                        that.findList()
                                        that.$message({
                                            message: data.msg,
                                            type: 'success',
                                            center: true
                                        });
                                        that.showEdit = false;
                                    } else {
                                        that.$message({
                                            message: data.msg,
                                            type: 'error',
                                            center: true
                                        });
                                    }
                                    that.disabled = false;
                                }, function (xhr, type, errorThrown) {
                                })
                            }
                            this.submitLoading = false;
                            that.disabled = true;
                        } else {
                            return false;
                        }
                    });
                },
                resetEvent(formName) {
                    let treeObj = $.fn.zTree.getZTreeObj("ztree");
                    let nodes = treeObj.getCheckedNodes(true);
                    if (nodes.length >= 1) {
                        this.formData = {
                            buttonId: "",
                            buttonName: "",
                            btId: "",
                            orderId: "",
                            menuId: nodes[0].menuId
                        };
                        this.selectRow = null;
                    } else {
                        this.$message({
                            message: '请选择菜单',
                            type: 'warning',
                            center: true
                        });
                    }
                },
                closeEvent(formName) {
                    this.showEdit = false;
                },
                editEvent(row) {
                    this.isEdit = true
                    this.formData = {
                        buttonId: row.buttonId,
                        buttonName: row.buttonName,
                        btId: this.formatterBtnType(row.btId),
                        orderId: row.orderId,
                        menuId: row.menuId
                    };
                    this.selectRow = row;
                    this.showEdit = true;
                },
                removeEvent(row) {
                    this.$XModal.confirm('您确定要删除该数据?(删除后会影响拥有该按钮权限的用户)').then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let ids = ""
                            row.forEach(item => {
                                ids += item.buttonId + ","
                            });
                            let params = {
                                buttonId: ids
                            };
                            let that = this;
                            webApi('/button/delete', 'post', params, function (data) {
                                if (data.code == 200) {
                                    that.findList()
                                    that.$message({
                                        message: data.msg,
                                        type: 'success',
                                        center: true
                                    });
                                    that.showEdit = false;
                                } else {
                                    that.$message({
                                        message: data.msg,
                                        type: 'error',
                                        center: true
                                    });
                                }
                            }, function (xhr, type, errorThrown) {
                            })
                            this.submitLoading = false;
                        }
                    });
                },
                cellDBLClickEvent({
                                      row
                                  }) {
                    this.editEvent(row);
                },
                checkColumnMethod({
                                      column
                                  }) {
                    if (['buttonId', 'buttonName'].includes(column.property)) {
                        return false
                    }
                    return true
                }
            }
        };

        let vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>

</html>